<!--
 * @Author: zhoujieyu zhoujieyu_web@163.com
 * @Date: 2024-10-10 10:52:16
 * @LastEditors: zhoujieyu zhoujieyu_web@163.com
 * @LastEditTime: 2024-10-23 14:55:03
 * @FilePath: \Code\src\Views\home\IntelligentSecurity\left\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Left_box>
    <Box :height="240" class="contentBox">
      <Lease_title>城市监测</Lease_title>
      <thome />
    </Box>
    <Box class="box" :height="1080">
      <Box :height="460" class="contentBox">
        <Lease_title>苏州园区</Lease_title>
        <Box :height="430" class="contentBoxEcharts" id="container"></Box>
      </Box>
      <Box :height="340" class="contentBox">
        <Lease_title>城市产业总值增幅概况</Lease_title>
        <V3Echarts :options="option3()" container="emergencylbox2" :height="320" :width="430"></V3Echarts>
      </Box>
    </Box>
  </Left_box>
</template>
<script lang="ts" setup>
import Left_box from '@/components/left_box.vue'
import Lease_title from '@/components/Lease_title/index.vue'
import Box from '@/components/Box/index.vue'
import V3Echarts from '@/components/V3Echarts/index.vue'
import thome from './thome.vue'
import { option3, option4 } from '../charOpt/index'
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
setTimeout(() => {
  const dom: HTMLBRElement = document.getElementById('container') as HTMLBRElement
  const myChart = echarts.init(dom)
  option4(myChart)
}, 500)
</script>
<style lang="scss" scoped>
.contentBoxEcharts {
  position: relative;
  @include Top(-50);
  @include Left(-40);
}
</style>
